/*
 * @Author: xinyang3
 * @Date: 2021-07-19 11:41
 * @Descripttion: 深入组件
 * @LastEditors: xinyang3
 * @LastEditTime: 2021-07-19 15:12
 */
const ChildComponent = {
  props: ['initialCounter'],
  data() {
    return {
      counter: this.initialCounter,
    };
  },
  methods: {
    change(e) {
      this.counter++;
    }
  },
  computed: {
    changedCounter() {
      return this.counter + 2;
    }
  },
  template: `
    <div >{{counter}}</div><span>{{changedCounter}}</span>
    <button class="change" @click="change">change counter</button>
  `

};

const ParentComponent = {
  data() {
    return {
      counter: 20,
    };
  },
  components: {
    ChildComponent
  },
  template: `<div class="parent">
    <child-component v-bind:initialCounter="counter"></child-component>
  </div>`,
};

export default ParentComponent;